<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>inputEx - Group Usage</title>

<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="../lib/yui/fonts/fonts-min.css">
<link rel="stylesheet" type="text/css" href="../lib/yui/container/assets/container.css"> 
<link rel="stylesheet" type="text/css" href="../lib/yui/assets/skins/sam/skin.css">

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../css/inputEx.css' />

<!--[if IE 6]>
<link type='text/css' rel='stylesheet' href='../css/inputEx-IE6.css' />
<![endif]-->

<!-- Demo CSS -->
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">

 </head>

 <body>

<p class='demoTitle'>inputEx - Group Usage</p>


<!-- Example 1 -->
<div class='exampleDiv'>

	<p class="title">Basic Group creation</p>
	
	<p>Use the following code to create a basic inputEx group.</p>

	<div class='demoContainer' id='container1'></div>

	<div class='codeContainer'>
				<textarea name="code" class="JScript">
			var contactFormFields = [ 
					{type: 'select', inputParams: {label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] } },
					{inputParams: {label: 'Firstname', name: 'firstname', required: true } }, 
					{inputParams: {label: 'Lastname', name: 'lastname', value:'Dupont' } }, 
					{type:'email', inputParams: {label: 'Email', name: 'email', required: true, showMsg: true}}, 
					{type:'boolean', inputParams: {label: 'Happy to be there ?', name: 'happy'}}, 
					{type:'url', inputParams: {label: 'Website', name:'website'}} 
			];
			new YAHOO.inputEx.Group({parentEl: 'container1', fields: contactFormFields, legend: 'Tell us about yourself...'});
		</textarea>
			</div>

</div>




<!-- Example 2 -->
<div class='exampleDiv'>

	<p class="title">Composition</p>
	
	<p>The YAHOO.inputEx.Group class inherits from inputEx.Field</p>

	<div class='demoContainer' id='container2'></div>

	<div class='codeContainer'>
				<textarea name="code" class="JScript">
			new YAHOO.inputEx.ListField({
				elementType: {
					type: 'group',
					inputParams: {
						fields: contactFormFields
					}
				} ,
				parentEl: 'container2'
			});
		</textarea>
			</div>

</div>


<!-- Example 3 -->
<div class='exampleDiv'>

	<p class="title">Updated event</p>
	
	<p>How to listen to the updated event :</p>

	<div class='demoContainer' id='container3'></div>

	<div class='codeContainer'>
				<textarea name="code" class="JScript" cols="60" rows="1">
			var el = YAHOO.util.Dom.get('container3');
			var group = new YAHOO.inputEx.Group({parentEl: el, fields: contactFormFields });
			var logDiv = inputEx.cn('div', null, null, "Log :<br />");
			el.appendChild(logDiv);
			group.updatedEvt.subscribe(function() {
				logDiv.innerHTML += "Updated at "+(new Date())+"<br />";
			});
		</textarea>
			</div>

</div>



<!-- Example 4 -->
<div class='exampleDiv'>

	<p class="title">Collapsible</p>
	
	<p>Collapsible</p>

	<div class='demoContainer' id='container4'></div>

	<div class='codeContainer'>
				<textarea name="code" class="JScript" cols="60" rows="1">
			new YAHOO.inputEx.Group({parentEl: 'container4', fields: contactFormFields, legend: 'User Informations', collapsible: true});
		</textarea>
			</div>

</div>



<!-- Example 5 -->
<div class='exampleDiv'>

	<p class="title">Composition</p>
	
	<p>Composition</p>

	<div class='demoContainer' id='container5'></div>

	<div class='codeContainer'>
				<textarea name="code" class="JScript" cols="60" rows="1">
			contactFormFields.push({
				type: 'group',
				inputParams: {
					name: 'phone',
					collapsible: true,
					legend: 'Phone number',
					fields: [
						{label: 'Home', inputParams: {name: 'home' } },
						{label: 'Business', inputParams: {name: 'business' } },
						{label: 'Mobile', inputParams: {name: 'mobile' } },
						{label: 'Fax', inputParams: {name: 'fax' } }
					]
				}
			})
			var field5 = new YAHOO.inputEx.Group({parentEl: 'container5', fields: contactFormFields});
			var button5 = YAHOO.inputEx.cn('button', null, null, 'Get value');
			YAHOO.util.Dom.get('container5').appendChild(button5);
			YAHOO.util.Event.addListener(button5, "click", function() {
				alert( YAHOO.lang.JSON.stringify(field5.getValue()) );
			});
		</textarea>
			</div>

</div>




<!-- Example 6 -->
<div class='exampleDiv'>

	<p class="title">Field descriptions</p>
	
	<p>Specify field descriptions</p>

	<div class='demoContainer' id='container6'></div>

	<div class='codeContainer'>
				<textarea name="code" class="JScript">
			var descriptedFields = [ 
					{type: 'select', inputParams: {label: 'Title', name: 'title', description: 'Select your gender',  selectValues: ['Mr','Mrs','Mme'] } },
					{ inputParams: {label: 'Firstname', description: 'Your firstname', name: 'firstname', required: true, value:'Jacques' } }, 
					{ inputParams: {label: 'Lastname', description: 'Your lastname', name: 'lastname', value:'Dupont' } }, 
					{ type:'email', inputParams: {description: 'Your email. We wont send you any commercial information', label: 'Email', name: 'email'}}, 
					{type:'boolean', inputParams: {description: 'Check this box if you are happy to be there', label: 'Happy to be there ?', name: 'email'}}, 
					{ type:'url', inputParams: {description: 'Your blog url', label: 'Website', name:'website'}} 
			];
			new YAHOO.inputEx.Group({parentEl: 'container6', fields: descriptedFields, legend: 'User Informations'});
		</textarea>
			</div>

</div>


<!-- Example 7 -->
<div class='exampleDiv'>

	<p class="title">Flatten output value for a sub-group</p>
	
	<p>The parent group will then flatten the sub-group value within its value.</p>
	
	<p>In this example, we return <i>{firstname: ..., lastname: ..., title:... }</i> instead of <i>{ MySubForm: {firstname: ..., lastname: ...}, title:... }</i>.</p>

	<div class='demoContainer' id='container7'></div>

	<div class='codeContainer'>
				<textarea name="code" class="JScript">
			var flattenGroup = new YAHOO.inputEx.Group({
				parentEl: 'container7', 
				legend: 'Flatten demo', 
				inputParams: {name: "MyForm"},
				fields: [
			      { 
			          type: 'group',
			          flatten: true, 
			          inputParams: {
									name: "MySubForm",
									fields: [
				             {inputParams: {label: 'Firstname', name: 'firstname' }},
				             {inputParams: {label: 'Lastname', name: 'lastname',description: "Firstname and Lastname are within the same sub-group" }}
				          ]
								},
			      },
			      { inputParams: {label: 'Title', name: 'title' } }
			   ]
			});
			flattenGroup.updatedEvt.subscribe(function(e,params) {
				var value = params[0];
				YAHOO.util.Dom.get('container7').appendChild( inputEx.cn('div',null,null, YAHOO.lang.JSON.stringify(value)) );
			});
		</textarea>
			</div>

</div>



<!-- YUI Library -->
<script type="text/javascript" src="../lib/yui/yahoo/yahoo-min.js"></script> 
<script type="text/javascript" src="../lib/yui/dom/dom-min.js"></script> 
<script type="text/javascript" src="../lib/yui/event/event-min.js"></script>
<script type="text/javascript" src="../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../lib/yui/json/json-min.js"></script>

<!-- InputEx -->
<script src="../js/inputex.js"  type='text/javascript'></script>
<script src="../js/Field.js"  type='text/javascript'></script>
<script src="../js/Group.js"  type='text/javascript'></script>
<script src="../js/fields/StringField.js"  type='text/javascript'></script>
<script src="../js/fields/SelectField.js"  type='text/javascript'></script>
<script src="../js/fields/EmailField.js"  type='text/javascript'></script>
<script src="../js/fields/UrlField.js"  type='text/javascript'></script>
<script src="../js/fields/ListField.js"  type='text/javascript'></script>
<script src="../js/fields/CheckBox.js"  type='text/javascript'></script>

<script>

YAHOO.util.Event.addListener(window, 'load', function() {
	// Required for the UrlField and listfield
	YAHOO.inputEx.spacerUrl = "../images/space.gif";

	// Example 1
	var contactFormFields = [ 
			{type: 'select', inputParams: {label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] } },
			{inputParams: {label: 'Firstname', name: 'firstname', required: true } }, 
			{inputParams: {label: 'Lastname', name: 'lastname', value:'Dupont'} }, 
			{type:'email', inputParams: {label: 'Email', name: 'email', required: true, showMsg: true}}, 
			{type:'boolean', inputParams: {label: 'Happy to be there ?', name: 'happy'}}, 
			{type:'url', inputParams: {label: 'Website', name:'website'}} 
	];
	new YAHOO.inputEx.Group({parentEl: 'container1', fields: contactFormFields, legend: 'Tell us about yourself...'});
	
	
	// Example 2
	new YAHOO.inputEx.ListField({
		elementType: {
			type: 'group',
			inputParams: {
				fields: contactFormFields
			}
		} ,
		parentEl: 'container2'
	});
	
	
	// Example 3
	var el = YAHOO.util.Dom.get('container3');
	var group3 = new YAHOO.inputEx.Group({parentEl: el, fields: contactFormFields });
	var logDiv = YAHOO.inputEx.cn('div', null, null, "Log :<br />");
	el.appendChild(logDiv);
	group3.updatedEvt.subscribe(function() {
		logDiv.innerHTML += "Updated at "+(new Date())+"<br />";
	});
	
	var setValueButton = inputEx.cn('button', null, null, "SetValue");
	YAHOO.util.Event.addListener(setValueButton, 'click', function() {
		group3.setValue({
			title: 'Mme',
			firstname: 'Eric',
			lastname: 'Abouaf', 
			happy: false,
			email: 'something@email.com',
			website: 'http://javascript.neyric.com/inputex'
		});
	});
	el.appendChild(setValueButton);
	
	
	// Example 4
	new YAHOO.inputEx.Group({parentEl: 'container4', fields: contactFormFields, legend: 'User Informations', collapsible: true});
	
	// Example 5
	var contactFormFields2 = [ 
			{type: 'select', inputParams: {label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] } },
			{inputParams: {label: 'Firstname', name: 'firstname', required: true } }, 
			{inputParams: {label: 'Lastname', name: 'lastname', value:'Dupont', required:false } }, 
			{type:'email', inputParams: {label: 'Email', name: 'email', required: true, showMsg: true}}, 
			{type:'boolean', inputParams: {label: 'Happy to be there ?', name: 'happy'}}, 
			{type:'url', inputParams: {label: 'Website', name:'website'}} 
	];
	contactFormFields2.push({
		type: 'group',
		inputParams: {
			name: 'phone',
			collapsible: true,
			legend: 'Phone number',
			fields: [
				{ inputParams: {label: 'Home', name: 'home' } },
				{ inputParams: {label: 'Business', name: 'business' } },
				{ inputParams: {label: 'Mobile',name: 'mobile' } },
				{ inputParams: {label: 'Fax', name: 'fax' } }
			]
		}
	});
	var field5 = new YAHOO.inputEx.Group({parentEl: 'container5', fields: contactFormFields2});
	var button5 = YAHOO.inputEx.cn('button', null, null, 'Get value');
	YAHOO.util.Dom.get('container5').appendChild(button5);
	YAHOO.util.Event.addListener(button5, "click", function() {
		alert( YAHOO.lang.JSON.stringify(field5.getValue()) );
	});
	var setValueButton = inputEx.cn('button', null, null, "SetValue");
	YAHOO.util.Event.addListener(setValueButton, 'click', function() {
		field5.setValue({
			title: 'Mme',
			firstname: 'Eric',
			lastname: 'Abouaf', 
			happy: false,
			email: 'something@email.com',
			website: 'http://javascript.neyric.com/inputex',
			phone:{
				home:"911",
			   fax:"911"
			}
		});
	});
	var el = YAHOO.util.Dom.get('container5');
	el.appendChild(setValueButton);
	var validButton = YAHOO.inputEx.cn('button', null, null, 'Validate');
	YAHOO.util.Dom.get('container5').appendChild(validButton);
	YAHOO.util.Event.addListener(validButton, "click", function() {
		alert( field5.validate() );
	});
	
	
	// Example 6
	var descriptedFields = [ 
			{type: 'select', inputParams: {label: 'Title', name: 'title', description: 'Select your gender',  selectValues: ['Mr','Mrs','Mme'] } },
			{ inputParams: {label: 'Firstname', description: 'Your firstname', name: 'firstname', required: true, value:'Jacques' } }, 
			{ inputParams: {label: 'Lastname', description: 'Your lastname', name: 'lastname', value:'Dupont' } }, 
			{ type:'email', inputParams: {description: 'Your email. We wont send you any commercial information', label: 'Email', name: 'email'}}, 
			{type:'boolean', inputParams: {description: 'Check this box if you are happy to be there', label: 'Happy to be there ?', name: 'email'}}, 
			{ type:'url', inputParams: {description: 'Your blog url', label: 'Website', name:'website'}} 
	];
	new YAHOO.inputEx.Group({parentEl: 'container6', fields: descriptedFields, legend: 'User Informations'});
	
	
	
	// Example 7
	var flattenGroup = new YAHOO.inputEx.Group({
		parentEl: 'container7', 
		legend: 'Flatten demo', 
		inputParams: {name: "MyForm"},
		fields: [
	      { 
	          type: 'group',
	          inputParams: {
							name: "MySubForm",
		          flatten: true,
							fields: [
		             {inputParams: {label: 'Firstname', name: 'firstname' }},
		             {inputParams: {label: 'Lastname', name: 'lastname',description: "Firstname and Lastname are within the same sub-group" }}
		          ]
						}
	      },
	      { inputParams: {label: 'Title', name: 'title' } }
	   ]
	});
	flattenGroup.updatedEvt.subscribe(function(e,params) {
		var value = params[0];
		YAHOO.util.Dom.get('container7').appendChild( inputEx.cn('div',null,null, YAHOO.lang.JSON.stringify(value)) );
	});
	
});

</script>

<script src="js/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code');
</script>

 </body>
</html>